<template>
  <el-card class="box-card">
    <el-form>
      <h3>登录系统</h3>
      <el-form-item>
        <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <!-- <el-button type="default" @click="dialogVisible = true">QQ登录</el-button>   -->
      </el-form-item>
    </el-form>
  </el-card>

  <!-- qq_login -->
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="50%"
    :before-close="handleClose"
  >
    <iframe src="https://me.inzj.cn/index/common/qqlogin.html" width="100%" height="400px" frameborder="0"></iframe>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { POST } from '../utils/Request'
import { Success, Error } from '../utils/notify'
import { inisHelper } from '../utils/helper'
import { reactive, toRefs } from '@vue/reactivity'
import { useRouter } from 'vue-router'
import {useStore} from "vuex";
export default defineComponent({
    name : 'Login',
    setup(){
        const store = useStore()
        const router = useRouter()
        const dialogVisible = ref(false)
        const state = reactive({
            loginForm:{
                username: '',
                password: '',
            },

        })
        const methods = {
            async login(){
                let resp = await POST('/common/login',state.loginForm)
                if(resp.code == 1){

                    localStorage.setItem('isLogin',1)
                    inisHelper.set.storage('user-token',{value:resp.data.token})
                    inisHelper.set.storage('user-info',resp.data.user)

                    Success(resp.msg)
                    setTimeout(function(){
                      window.location.href = "/"
                    },1500)
                }else{
                    Error(resp.msg)
                }
            },
        }
        return {
            dialogVisible,
            ...toRefs(state),
            ...methods
        }
    }
})
</script>

<style scoped>
.box-card {
  margin: 100px auto;
  width: 400px;
}
#verify{
    cursor: pointer;
    width: 140px;
    position: absolute;
    right: 1px;
    top: 1px;
    height: 38px;
    border-radius: 4px;
}
</style>